import { TodoItem } from "./TodoContext"
import { useState, useEffect } from "react"
const useTodos = (initialValue: TodoItem[]) => {
  const [todos, setTodos] = useState(initialValue)
  // 添加任务
  const onAdd = (text: string) => {
    const id = todos.length === 0 ? 1 : todos[todos.length - 1].id + 1
    setTodos([
      ...todos,
      {
        id,
        text,
        done: false
      }
    ])
  }
  // 切换状态
  const onToggle = (id: number) => {
    const newTodos = todos.map(todo => {
      if (todo.id === id) {
        return {
          ...todo,
          done: !todo.done
        }
      }
      return todo
    })
    setTodos(newTodos)
  }
  // 删除任务
  const onDelete = (id: number) => {
    const newTodos = todos.filter(item => {
      return item.id !== id
    })
    setTodos(newTodos)
  }
  // 本地化  1.读取本地数据 2.数据改变时存储数据
  // 读取localhost中的数据
  useEffect(() => {
    const res = localStorage.getItem('todos')
    if (res) {
      const resTodos = JSON.parse(res)
      setTodos(resTodos)
    }
  }, [])
  // 保存最新的数据到localStorage
  useEffect(() => {
    localStorage.setItem('todos', JSON.stringify(todos))
  }, [todos])

  return { todos, onAdd, onDelete, onToggle }
}

export default useTodos